<template>
  <el-main>
    <!-- 房间基本信息管理 -->
    <div class="tag-management">
      <!-- 每个属性区块 -->
      <div v-for="(attr) in attributes" :key="attr.id" class="attribute-block">
        <!-- 属性名称 -->
        <div class="attribute-header">
          <span class="attribute-title">{{ attr.name }}：</span>

          <!-- 属性值标签 -->
          <el-tag
            v-for="(value, vIndex) in attr.values"
            :key="vIndex"
            class="attribute-tag"
            closable
            @close="removeAttrValue(attr.id, value.id)"
          >
            {{ value.name }}
          </el-tag>

          <!-- 操作按钮 -->
          <el-button size="mini" @click="showAddValueDialog(attr.id)">添加属性值</el-button>
          <el-button size="mini" type="danger" @click="removeAttribute(attr.id)">删除该属性</el-button>
        </div>
      </div>

      <!-- 添加新属性 -->
      <div class="add-attribute">
        <el-button type="primary" size="small" @click="showAddAttrDialog">
          + 添加属性
        </el-button>
      </div>

      <!-- 添加属性值对话框 -->
      <el-dialog v-model="valueDialogVisible" :title="`添加${currentAttribute?.name}属性值`" width="30%">
        <el-input v-model="newValue" placeholder="请输入属性值" />
        <template #footer>
          <el-button @click="valueDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addAttributeValue">确认</el-button>
        </template>
      </el-dialog>

      <!-- 添加属性对话框 -->
      <el-dialog v-model="attrDialogVisible" title="添加新属性" width="30%">
        <el-input v-model="newAttributeName" placeholder="请输入属性名称" />
        <template #footer>
          <el-button @click="attrDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addAttribute">确认</el-button>
        </template>
      </el-dialog>
    </div>
  </el-main>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import request from '@/utils/request'
import { ElMessage } from 'element-plus'

// 属性数据（示例结构）
const attributes = ref([
  /* 从后端获取的数据结构示例：
  {
    id: 1,
    name: '面积',
    values: [
      { id: 1, name: '25平' },
      { id: 2, name: '30平' }
    ]
  }
  */
])

// 对话框控制
const valueDialogVisible = ref(false)
const attrDialogVisible = ref(false)
const newValue = ref('')
const newAttributeName = ref('')
const currentAttribute = ref(null)

onMounted(() => {
  fetchAttributes()
})

// 获取属性数据
const fetchAttributes = async () => {
  try {
    const res = await request.get('/api/attributes')
    attributes.value = res.data
  } catch (error) {
    ElMessage.error('获取数据失败')
    console.error('获取数据失败:', error)
  }
}

// 显示添加属性值对话框
const showAddValueDialog = (attrId) => {
  currentAttribute.value = attributes.value.find(a => a.id === attrId)
  valueDialogVisible.value = true
}

// 添加属性值
const addAttributeValue = async () => {
  if (!newValue.value.trim()) {
    ElMessage.warning('请输入有效值')
    return
  }

  try {
    await request.post('/api/attribute/values', {
      attributeId: currentAttribute.value.id,
      value: newValue.value
    })
    await fetchAttributes()
    valueDialogVisible.value = false
    newValue.value = ''
  } catch (error) {
    ElMessage.error('添加失败')
    console.error('添加失败:', error)
  }
}

// 删除属性值
const removeAttrValue = async (attrId, valueId) => {
  try {
    await request.delete(`/api/attribute/values/${valueId}`)
    await fetchAttributes()
  } catch (error) {
    ElMessage.error('删除失败')
    console.error('删除失败:', error)
  }
}

// 添加新属性
const addAttribute = async () => {
  if (!newAttributeName.value.trim()) {
    ElMessage.warning('请输入属性名称')
    return
  }

  try {
    await request.post('/api/attributes', {
      name: newAttributeName.value
    })
    await fetchAttributes()
    attrDialogVisible.value = false
    newAttributeName.value = ''
  } catch (error) {
    ElMessage.error('添加失败')
    console.error('添加失败:', error)
  }
}

// 删除属性
const removeAttribute = async (attrId) => {
  try {
    await request.delete(`/api/attributes/${attrId}`)
    await fetchAttributes()
  } catch (error) {
    ElMessage.error('删除失败')
    console.error('删除失败:', error)
  }
}
</script>

<style scoped>
.tag-management {
  padding: 20px;
}

.attribute-block {
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.attribute-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.attribute-title {
  font-weight: 500;
  min-width: 60px;
}

.attribute-tag {
  margin-right: 8px;
}

.add-attribute {
  margin-top: 20px;
  border-top: 1px dashed #ddd;
  padding-top: 20px;
}
</style>
